import React from 'react'
import './Todofooter.css'
export default function Todofooter(props) {

        let {todo,clearAlltodo,checkedalltodo}=props;

        //清除已完成
        let clear=()=>{
            clearAlltodo();
        }

        //全选与取消全选
        let updataall=(e)=>{
            // console.log(e.target.checked);
            checkedalltodo(e.target.checked);
        }

  return (
    <>
        <div className="todo-footer">
        <label>
          <input type="checkbox" checked={todo.every(item => item.done) && todo.length !== 0} onChange={updataall}/>
        </label>
        <span>
          <span>已完成{todo.filter(item=>item.done===true).length}</span> / 全部{todo.length}
        </span>
        <button className="btn btn-danger" onClick={clear}>清除已完成任务</button>
      </div>
    </>
  )
}
